<nz-layout>
    <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
        <div class="logo">
        </div>
        <ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed?'vertical':'inline'">
            <li nz-submenu *ngFor="let menu of menus" [nzOpen]="selectedSubMenu === menu.url">
                <span title>
                    <i class="anticon anticon-{{ menu.icon }}"></i>
                    <span class="nav-text"> {{ menu.name }}</span>
                </span>
                <ul>
                    <a nz-menu-item [routerLink]="'.' + menu.url + childMenu.url" routerLinkActive="ant-menu-item-selected" *ngFor="let childMenu of menu.children">
                        <i class="anticon anticon-{{ childMenu.icon }}"></i>
                        {{ childMenu.name }}
                    </a>
                </ul>
            </li>
        </ul>
    </nz-sider>
    <nz-layout>
        <nz-header style="background: #fff; padding:0;">
            <i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i>
            <nz-dropdown class="login-user" [nzPlacement]="'bottomRight'">
                <a class="ant-dropdown-link" nz-dropdown>
                    <i class="anticon anticon-user"></i> {{ loginUser.name }}
                </a>
                <ul nz-menu>
                    <li nz-menu-item>
                        <a rel="noopener noreferrer">个人信息</a>
                    </li>
                    <li nz-menu-divider></li>
                    <li nz-menu-item>
                        <a rel="noopener noreferrer" (click)="logout(loginUser._id)">退出登录</a>
                    </li>
                </ul>
            </nz-dropdown>
        </nz-header>
        <nz-content style="margin:0 16px;">
            <router-outlet></router-outlet>
        </nz-content>
        <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
    </nz-layout>
</nz-layout>